<link rel="stylesheet" type="text/css" href="Addons/Kefu/Static/css/sidebar.css">
<div class="side kefu-tool">
    {if condition="$kefu['qq']"}
    <div class="tool-popover">
        <div class="side-item btn-group btn-primary">
            <i class="glyphicon glyphicon-home"></i>
            <span>QQ</span>
        </div>
        <div class="panel bs-panel panel-default">
            <div class="panel-heading">联系QQ</div>
            <div class="panel-body">
            {volist name="kefu['qq']" id="vo"}
                <sapn class="tool-item">{$vo[0]}：{$vo[1]}</sapn>
            {/volist}
            </div>
        </div>
    </div>
    {/if}
    <div class="tool-popover">
        <div class="side-item btn-group btn-primary">
            <i class="glyphicon glyphicon-home"></i>
            <span>微信</span>
        </div>
        <div class="panel bs-panel panel-default">
            <div class="panel-heading">微信二维码</div>
            <div class="panel-body">
                <sapn class="tool-item"><img src="__PUBLIC__/images/wechat.jpg" width="200"></sapn>
            </div>
        </div>
    </div>
    {if condition="$kefu['phone']"}
    <div class="tool-popover">
        <div class="side-item btn-group btn-primary">
            <i class="glyphicon glyphicon-earphone"></i>
            <span>电话</span>
        </div>
        <div class="panel bs-panel panel-default">
            <div class="panel-heading">联系电话</div>
            <div class="panel-body">
                <span class="tool-item">联系电话：<a href="tel:{$kefu['phone']}">{$kefu['phone']}</a></span>
            </div>
        </div>
    </div>
    {/if}
    {if condition="$kefu['url']"}
    <div class="side-item btn-group btn-success">
        <a href="{$kefu['url']}">
            <i class="glyphicon glyphicon-home"></i>
            <span>反馈</span>
        </a>
    </div>
    {/if}
    <div class="side-item btn-group btn-danger scroll-button" data-am-smooth-scroll>
        <i class="glyphicon glyphicon-triangle-top"></i>
        <a href="javascript:scroll(0,0)">
            <span class="scroll">顶部</span>
        </a>
    </div>
</div>
<script type="text/javascript">
$(function() {   
    $('.kefu-tool .side-item').mouseout(function(){
        $(this).find('i').show();
        $(this).find('span').hide();
    }).mouseover(function(){
        $(this).find('i').hide();
        $(this).find('span').show();
    });
    $('.tool-popover').mouseout(function(){
        $(this).find('.panel').hide();
    }).mouseover(function(){
        $(this).find('.panel').show();
    });

    $(window).scroll(function(){
        var scrTop = $(window).scrollTop();
        var windowTop = $(window).height();
        if ((windowTop-300)<scrTop){
            $(".kefu-top").fadeIn("slow");
        }else{
            $(".kefu-top").fadeOut("slow");
        }
    });
});
</script>